//头部百度搜索框
var arr = ["a","ab","abc","ak","mm","fk","fa","abcde","ma"];

// 1.获得要操作的对象
var box = document.querySelector(".box");
var searchVal = document.getElementById("searchVal");

// 2.给事件源注册事件
searchVal.onkeyup = function (){
    // 3. 获取输入的值
    var val = this.value;

    // 4. 遍历数组,查询数组中哪些是以输入的内容为开头的数据
    var filterArr = [];
    for(var i=0;i<arr.length;i++){
        if(arr[i].indexOf(val)==0){
            filterArr.push(arr[i]);
        }
    }
    console.log(filterArr);
    // 5. 动态创建元素div
    var divPop = document.getElementById("pop");  // 8. 如果之前已经有divPoP先把之前的删除掉,然后再创建新的
    if(divPop){
        box.removeChild(divPop); // 如果原来存在的话，则先把原来的盒子给清掉
    }

    // 9. 如果没有以输入的内容为开头的数据,则不要执行下面的代码
    if(filterArr.length==0){
        return;
    }

    // 10. 如果输入的值没为空
    if(val==""){
        return;
    }

    divPop = document.createElement("div");
    divPop.id = "pop";
    box.appendChild(divPop);

    // 6. 动态创建ul
    var ul = document.createElement("ul");
    divPop.appendChild(ul);

    // 7. 动态创建li标签  根据filterArr中的数据来创建li标签
    for(var j=0;j<filterArr.length;j++){
        var li = document.createElement("li");
        li.innerHTML = filterArr[j];
        ul.appendChild(li);
    }
};